
<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>微剧组</title>
    <link rel="icon" href="./TP/favicon.ico" />
    <link rel="stylesheet" href="./YS.css">
    <link rel="stylesheet" href="./font/iconfont.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.10.2/css/all.min.css" />
  </head>
  <body class="flex column"><div id="yingcang"><div class="loadingSeven"><span></span><span></span><span></span><span></span><span></span></div></div>
    <!--<div class="square">
        <ul class="bj">
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>
    <div class="circle">
        <ul class="bj">
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>-->
    <!--标题栏-->
    <div style=" z-index: 3">
      <div style="height: 95px;" class="bt flex2 baise yinying">
        <!-- 头像栏 -->
        <div
          style="padding: 10px; align-items: center; justify-content: center"
          class="flex"
        >
          <img
            src="./TP/LOGO.png"
            width="70px"
            height="75px"
            alt="微剧组"
            title="星标"
          />
        </div>
        <b>微</b>
        <b>剧</b>
        <b>组</b>
      </div>
    </div>
    <!-- 导航栏 -->
    <div style="z-index: 2;" class="dw">
        <div class="munu-box">
          <div class="emotion-box">
            <i id="emotion1" class="iconfont icon-zhankaicaidan"></i>
            <i id="emotion2" class="iconfont icon-shouqicaidan"></i>
          </div>
          <ul>
            <li>
              <a href="#">
                <i class="iconfont icon-home"></i>
                <p class="content">首页</p>
              </a>
            </li>
            <li>
              <a href="#">
                <i class="iconfont icon-icon"></i>
                <p class="content">图库</p>
              </a>
            </li>
            <li>
              <a href="./shouji.html">
                <i class="iconfont icon-shouji"></i>
                <p class="content">手机版</p>
              </a>
            </li>
            <li>
              <a href="http://zixue7.gitee.io/qishiye">
                <i class="iconfont icon-xinxi"></i>
                <p class="content">起始页</p>
              </a>
            </li>
            <li>
              <a href="https://zixue7.gitee.io/new-page">
                <i class="iconfont icon-guanyu"></i>
                <p class="content">新页面</p>
              </a>
            </li>
          </ul>
        </div>
    </div>
    <!--内容区-->
    <div style="margin-left: 50px;overflow: auto;" class="flex column mgr8">
        <!--轮播区-->
        <div style="flex: 3" class="flex column mgr8">
          <div style="justify-content: space-between;" class="flex">
            <!-- 图片块 -->
            <div style="height: 100px" class="baise mgr8 mgt8 yinying">
              <img
                src="./TP/SKY0.jpg"
                width="100%"
                height="100%"
                alt=""
                title="光遇-献祭升华"
              />
            </div>
            <div style="height: 100px" class="baise mgr8 mgt8 yinying">
              <img
                src="./TP/SKY1.jpg"
                width="100%"
                height="100%"
                alt=""
                title="光遇-遇镜传送门"
              />
            </div>
            <div style="height: 100px" class="baise mgr8 mgt8 yinying">
              <img
                src="./TP/SKY2.jpg"
                width="100%"
                height="100%"
                alt=""
                title="光遇-霞谷圆梦村"
              />
            </div>
            <div style="height: 100px" class="baise mgr8 mgt8 yinying">
              <img
                src="./TP/SKY3.jpg"
                width="100%"
                height="100%"
                alt=""
                title="光遇-玫瑰花园"
              />
            </div>
            <div style="height: 100px" class="baise mgt8 yinying">
              <img
                src="./TP/SKY4.jpg"
                width="100%"
                height="100%"
                alt=""
                title="光遇-遇镜夕阳"
              />
            </div>
          </div>
        </div>
        <!--列表区-->
        <div class="flex column">
          <!-- 列表项 -->
          <div style="height: 190px" class="flex baise mgt8 yinying">
              <div class="bfq flex">
                <!-- 音乐播放 -->
                <div class="music-container" id="music-container">
                  <!-- 音乐信息 -->
                  <div class="music-info">
                      <!-- 音乐标题 -->
                      <h4 id="title"></h4>
                      <!-- 音乐播放进度条 -->
                      <div class="progress-container" id="progress-container">
                          <div class="progress" id="progress"></div>
                      </div>
                  </div>
                
                  <!-- 默认第一首音乐 -->
                  <audio src="music/打上花火.mp3" id="audio" ></audio>
                
                  <!-- 音乐封面 -->
                  <div class="img-container">
                      <img src="img/打上花火.jpg" alt="music-cover" id="music-cover">
                  </div>
                  <!-- 播放控制 -->
                  <div class="navigation">
                      <button id="prev" class="action-btn">
                          <i class="fas fa-backward"></i>
                      </button>
                      <button id="play" class="action-btn action-btn-big">
                          <i class="fas fa-play"></i>
                      </button>
                      <button id="next" class="action-btn">
                          <i class="fas fa-forward"></i>
                      </button>
                  </div>
                </div>
              </div>
          </div>
          <div style="height: 144px" class="baise mgt8 yinying"></div>
          <div style="height: 144px" class="baise mgt8 yinying"></div>
          <div style="align-items: center; justify-content: center; height: 100px" class="flex footer baise mgt8 yinying">
            <p>不知道写什么</p>
          </div>
        </div>
    </div>
    <script src="script.js"></script>
  </body>
</html>
